<template>
  <div class="container">
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="排列三一号表" name="first">

        <el-container class="box">
          <!-- 左边区域 -->
          <el-aside width="140px">筛选逻辑</el-aside>
          <el-container>
            <!-- 顶部区域 -->
            <el-header height="40px">
                <span>5.筛选逻辑</span>
                <div>
                  <!-- <el-checkbox label="保留"></el-checkbox> -->
                  <el-checkbox label="删除" @change="empty"></el-checkbox>
                </div>
            </el-header>
            <!-- 内容区域 -->
            <el-main height="550px">
                <div class="left" >
                  <div class="item" v-for="(itme,index) in left_unit" :key='index'>
                    <span>{{itme}}</span>
                   <input class="input" v-if="index == 0"  type="text" v-model="bit_eq" />
                   <input class="input" v-if="index == 1"  type="text" v-model="ten_eq" />
                    <input class="input" v-if="index == 2"  type="text" v-model="hundred_eq" />
                    <input class="input" v-if="index == 3"  type="text" v-model="m_eq" />
                    <input class="input" v-if="index == 4"  type="text" v-model="m1_eq" />
                    <input class="input" v-if="index == 5"  type="text" v-model="m2_eq" />
                    <input class="input" v-if="index == 6"  type="text" v-model="m3_eq" />
                    <input class="input" v-if="index == 7"  type="text" v-model="m4_eq" />
                    <input class="input" v-if="index == 8"  type="text" v-model="m5_eq" />
                    <input class="input" v-if="index == 9"  type="text" v-model="m6_eq" />
                    <input class="input" v-if="index == 10"  type="text" v-model="m7_eq" />
                  </div>
                </div>
                <div class="right" >
                  <div class="item" v-for="(itme,index2) in right_unit" :key='index2'>
                    <input class="input" v-if="index2 == 0"  type="text" v-model="bit_gt" />
                    <input class="input" v-if="index2 == 1"  type="text" v-model="ten_gt" />
                    <input class="input" v-if="index2 == 2"  type="text" v-model="hundred_gt" />
                    <input class="input" v-if="index2 == 3"  type="text" v-model="m_gt" />
                    <input class="input" v-if="index2 == 4"  type="text" v-model="m1_gt" />
                    <input class="input" v-if="index2 == 5"  type="text" v-model="m2_gt" />
                    <input class="input" v-if="index2 == 6"  type="text" v-model="m3_gt" />
                    <input class="input" v-if="index2 == 7"  type="text" v-model="m4_gt" />
                    <input class="input" v-if="index2 == 8"  type="text" v-model="m5_gt" />
                    <input class="input" v-if="index2 == 9"  type="text" v-model="m6_gt" />
                    <input class="input" v-if="index2 == 10"  type="text" v-model="m7_gt" />
                    <span>{{itme}}</span>
                    <input class="input" v-if="index2 == 0"  type="text" v-model="bit_lt" />
                     <input class="input" v-if="index2 == 1"  type="text" v-model="ten_lt" />
                     <input class="input" v-if="index2 == 2"  type="text" v-model="hundred_lt" />
                     <input class="input" v-if="index2 == 3"  type="text" v-model="m_lt" />
                     <input class="input" v-if="index2 == 4"  type="text" v-model="m1_lt" />
                     <input class="input" v-if="index2 == 5"  type="text" v-model="m2_lt" />
                     <input class="input" v-if="index2 == 6"  type="text" v-model="m3_lt" />
                     <input class="input" v-if="index2 == 7"  type="text" v-model="m4_lt" />
                     <input class="input" v-if="index2 == 8"  type="text" v-model="m5_lt" />
                     <input class="input" v-if="index2 == 9"  type="text" v-model="m6_lt" />
                     <input class="input" v-if="index2 == 10"  type="text" v-model="m7_lt" />
                  </div>
                </div>
            </el-main>
          </el-container>
        </el-container>


        <!-- 底部按钮 -->
        <div class="bottom">
          <el-button type="primary" @click="goBack">上一步</el-button>
          <el-button type="primary" @click="goScreening">筛选</el-button>
          <el-button type="primary" @click="goScreening">下一步</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="排列三二号表" name="second">

        <el-container class="box">
          <!-- 左边区域 -->
          <el-aside width="140px">筛选逻辑</el-aside>
          <el-container>
            <!-- 顶部区域 -->
            <el-header height="40px">
                <span>5.筛选逻辑</span>
                <div>
                  <!-- <el-checkbox label="保留"></el-checkbox> -->
                  <el-checkbox label="删除" @change="empty"></el-checkbox>
                </div>
            </el-header>
            <!-- 内容区域 -->
            <el-main height="550px">
                <div class="left" >
                  <div class="item" v-for="(itme,index) in left_unit" :key='index'>
                    <span>{{itme}}</span>
                   <input class="input" v-if="index == 0"  type="text" v-model="bit_eq" />
                   <input class="input" v-if="index == 1"  type="text" v-model="ten_eq" />
                    <input class="input" v-if="index == 2"  type="text" v-model="hundred_eq" />
                    <input class="input" v-if="index == 3"  type="text" v-model="m_eq" />
                    <input class="input" v-if="index == 4"  type="text" v-model="m1_eq" />
                    <input class="input" v-if="index == 5"  type="text" v-model="m2_eq" />
                    <input class="input" v-if="index == 6"  type="text" v-model="m3_eq" />
                    <input class="input" v-if="index == 7"  type="text" v-model="m4_eq" />
                    <input class="input" v-if="index == 8"  type="text" v-model="m5_eq" />
                    <input class="input" v-if="index == 9"  type="text" v-model="m6_eq" />
                    <input class="input" v-if="index == 10"  type="text" v-model="m7_eq" />
                  </div>
                </div>
                <div class="right" >
                  <div class="item" v-for="(itme,index2) in right_unit" :key='index2'>
                    <input class="input" v-if="index2 == 0"  type="text" v-model="bit_gt" />
                    <input class="input" v-if="index2 == 1"  type="text" v-model="ten_gt" />
                    <input class="input" v-if="index2 == 2"  type="text" v-model="hundred_gt" />
                    <input class="input" v-if="index2 == 3"  type="text" v-model="m_gt" />
                    <input class="input" v-if="index2 == 4"  type="text" v-model="m1_gt" />
                    <input class="input" v-if="index2 == 5"  type="text" v-model="m2_gt" />
                    <input class="input" v-if="index2 == 6"  type="text" v-model="m3_gt" />
                    <input class="input" v-if="index2 == 7"  type="text" v-model="m4_gt" />
                    <input class="input" v-if="index2 == 8"  type="text" v-model="m5_gt" />
                    <input class="input" v-if="index2 == 9"  type="text" v-model="m6_gt" />
                    <input class="input" v-if="index2 == 10"  type="text" v-model="m7_gt" />
                    <span>{{itme}}</span>
                    <input class="input" v-if="index2 == 0"  type="text" v-model="bit_lt" />
                    <input class="input" v-if="index2 == 1"  type="text" v-model="ten_lt" />
                    <input class="input" v-if="index2 == 2"  type="text" v-model="hundred_lt" />
                    <input class="input" v-if="index2 == 3"  type="text" v-model="m_lt" />
                    <input class="input" v-if="index2 == 4"  type="text" v-model="m1_lt" />
                    <input class="input" v-if="index2 == 5"  type="text" v-model="m2_lt" />
                    <input class="input" v-if="index2 == 6"  type="text" v-model="m3_lt" />
                    <input class="input" v-if="index2 == 7"  type="text" v-model="m4_lt" />
                    <input class="input" v-if="index2 == 8"  type="text" v-model="m5_lt" />
                    <input class="input" v-if="index2 == 9"  type="text" v-model="m6_lt" />
                    <input class="input" v-if="index2 == 10"  type="text" v-model="m7_lt" />
                  </div>
                </div>
            </el-main>
          </el-container>
        </el-container>

        <!-- 底部按钮 -->
        <div class="bottom">
          <el-button type="primary" @click="goBack">上一步</el-button>
          <el-button type="primary" @click="goScreening">筛选</el-button>
          <el-button type="primary" @click="goScreening">下一步</el-button>
        </div>


      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>

  import axios from 'axios';
  import qs from 'qs';

  export default {
    name: 'rankThreeScreening',
    data() {
      return {
        activeName: 'first',
        left_unit:['个位=','十位=','百位=','M=','M1=','M2=','M3=','M4=','M5=','M6=','M7='],
        right_unit:['≤个位≤','≤十位≤','≤百位≤','≤M≤','≤M1≤','≤M2≤','≤M3≤','≤M4≤','≤M5≤','≤M6≤','≤M7≤'],
        filter:{}, // 筛选条件数据
        dataList:[], //表格公式数据
        list:[], // 分析结果数据
        bit_eq: '',
        ten_eq: '',
        hundred_eq: '',
        m_eq: '',
        m1_eq: '',
        m2_eq: '',
        m3_eq: '',
        m4_eq: '',
        m5_eq: '',
        m6_eq: '',
        m7_eq: '',
        bit_lt: '',
        ten_lt: '',
        hundred_lt: '',
        m_lt: '',
        m1_lt: '',
        m2_lt: '',
        m3_lt: '',
        m4_lt: '',
        m5_lt: '',
        m6_lt: '',
        m7_lt: '',
        bit_gt: '',
        ten_gt: '',
        hundred_gt: '',
        m_gt: '',
        m1_gt: '',
        m2_gt: '',
        m3_gt: '',
        m4_gt: '',
        m5_gt: '',
        m6_gt: '',
        m7_gt: '',
      };
    },

    created() {

      var activeName = this.$route.query.activeName;
      var type = this.$route.query.type;
      this.activeName = activeName;
      this.type = type;
      this.loadData();

    },

    methods: {
      handleClick(tab, event) {
        this.activeName = tab.name;
        this.loadData();
      },

      loadData(){
        if (this.activeName == 'first') {
          if (this.type == 1) {
            var dataJson =  window.localStorage.getItem("formulaForwardList");
            this.dataList = eval(dataJson);
          }else if (this.type == 2) {
            var dataJson =  window.localStorage.getItem("formulaMiddleList");
            this.dataList = eval(dataJson);
          }else {
            var dataJson =  window.localStorage.getItem("formulaList");
            this.dataList = eval(dataJson);
          }
        }else {
           if (this.type == 1) {
             var dataJson =  window.localStorage.getItem("formulaForwardList2");
             this.dataList = eval(dataJson);
           }else if (this.type == 2) {
             var dataJson =  window.localStorage.getItem("formulaMiddleList2");
             this.dataList = eval(dataJson);
           }else {
             var dataJson =  window.localStorage.getItem("formulaList2");
             this.dataList = eval(dataJson);
           }
        }
      },

      // 返回上一页
      goBack() {
        this.$router.back();
      },

      // 清空输入内容
      empty() {
        this.bit_eq="";
        this.ten_eq="";
        this.hundred_eq="";
        this.m_eq="";
        this.m1_eq="";
        this.m2_eq="";
        this.m3_eq="";
        this.m4_eq="";
        this.m5_eq="";
        this.m6_eq="";
        this.m7_eq="";
        this.bit_lt="";
        this.ten_lt="";
        this.hundred_lt="";
        this.m_lt="";
        this.m1_lt="";
        this.m2_lt="";
        this.m3_lt="";
        this.m4_lt="";
        this.m5_lt="";
        this.m6_lt="";
        this.m7_lt="";
        this.bit_gt="";
        this.ten_gt="";
        this.hundred_gt="";
        this.m_gt="";
        this.m1_gt="";
        this.m2_gt="";
        this.m3_gt="";
        this.m4_gt="";
        this.m5_gt="";
        this.m6_gt="";
        this.m7_gt="";
        this.filter={};
      },

      // 筛选
      async goScreening() {
        console.log("list == ", this.dataList)
        console.log("filter == ", this.filter)
        const res = await this.$http.post("/api/calc/filterData", {
            list:JSON.stringify(this.dataList),
            filter:JSON.stringify(this.filter)
        })
        console.log(res);
        if(res.data.code == 200) {
          this.$router.push({path:'/home/rankThreeManual',query: {activeName:this.activeName,type: this.type}})

          if (this.activeName == 'first') {
            if (this.type == 1) {
              window.localStorage.setItem("forwardfilterData",JSON.stringify(res.data.data));
            }else if (this.type == 2) {
              window.localStorage.setItem("middlefilterData",JSON.stringify(res.data.data));
            }else {
              window.localStorage.setItem("filterData",JSON.stringify(res.data.data));
            }
          }else {
            if (this.type == 1) {
              window.localStorage.setItem("forwardfilterData2",JSON.stringify(res.data.data));
            }else if (this.type == 2) {
              window.localStorage.setItem("middlefilterData2",JSON.stringify(res.data.data));
            }else {
              window.localStorage.setItem("filterData2",JSON.stringify(res.data.data));
            }
          }


        }else {
          this.$message.error("请求失败");
        }
      },

      goNext() {

      }
    },

    // 监听输入框编辑
    watch:{
        'bit_eq': function(newVal){
            this.$set(this.filter,'bit_eq',newVal)
        },
        'ten_eq': function(newVal){
            this.$set(this.filter,'ten_eq',newVal)
        },
        'hundred_eq': function(newVal){
            this.$set(this.filter,'hundred_eq',newVal)
        },
        'm_eq': function(newVal){
            this.$set(this.filter,'m_eq',newVal)
        },
        'm1_eq': function(newVal){
            this.$set(this.filter,'m1_eq',newVal)
        },
        'm2_eq': function(newVal){
            this.$set(this.filter,'m2_eq',newVal)
        },
        'm3_eq': function(newVal){
            this.$set(this.filter,'m3_eq',newVal)
        },
        'm4_eq': function(newVal){
            this.$set(this.filter,'m4_eq',newVal)
        },
        'm5_eq': function(newVal){
            this.$set(this.filter,'m5_eq',newVal)
        },
        'm6_eq': function(newVal){
            this.$set(this.filter,'m6_eq',newVal)
        },
        'm7_eq': function(newVal){
            this.$set(this.filter,'m7_eq',newVal)
        },
        'bit_lt': function(newVal){
            this.$set(this.filter,'bit_lt',newVal)
        },
        'ten_lt': function(newVal){
            this.$set(this.filter,'ten_lt',newVal)
        },
        'hundred_lt': function(newVal){
            this.$set(this.filter,'hundred_lt',newVal)
        },
        'm_lt': function(newVal){
            this.$set(this.filter,'m_lt',newVal)
        },
        'm1_lt': function(newVal){
            this.$set(this.filter,'m1_lt',newVal)
        },
        'm2_lt': function(newVal){
            this.$set(this.filter,'m2_lt',newVal)
        },
        'm3_lt': function(newVal){
            this.$set(this.filter,'m3_lt',newVal)
        },
        'm4_lt': function(newVal){
            this.$set(this.filter,'m4_lt',newVal)
        },
        'm5_lt': function(newVal){
            this.$set(this.filter,'m5_lt',newVal)
        },
        'm6_lt': function(newVal){
            this.$set(this.filter,'m6_lt',newVal)
        },
        'm7_lt': function(newVal){
            this.$set(this.filter,'m7_lt',newVal)
        },
        'bit_gt': function(newVal){
            this.$set(this.filter,'bit_gt',newVal)
        },
        'ten_gt': function(newVal){
            this.$set(this.filter,'ten_gt',newVal)
        },
        'hundred_gt': function(newVal){
            this.$set(this.filter,'hundred_gt',newVal)
        },
        'm_gt': function(newVal){
            this.$set(this.filter,'m_gt',newVal)
        },
        'm1_gt': function(newVal){
            this.$set(this.filter,'m1_gt',newVal)
        },
        'm2_gt': function(newVal){
            this.$set(this.filter,'m2_gt',newVal)
        },
        'm3_gt': function(newVal){
            this.$set(this.filter,'m3_gt',newVal)
        },
        'm4_gt': function(newVal){
            this.$set(this.filter,'m4_gt',newVal)
        },
        'm5_gt': function(newVal){
            this.$set(this.filter,'m5_gt',newVal)
        },
        'm6_gt': function(newVal){
            this.$set(this.filter,'m6_gt',newVal)
        },
        'm7_gt': function(newVal){
            this.$set(this.filter,'m7_gt',newVal)
        },

    }


  }
</script>

<style scoped="scoped">
  .container {
    height: 100%;
  }
  .box {
    border: 1px solid #2676C2;
  }
  .el-header {
    background-color: #FFFFFF;
    color: #333;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: solid;
    border-color: #2676C2;
    border-width: 1px;
  }

  .el-aside {
    background-color: #FFFFFF;
    color: #2676C2;
    text-align: center;
    line-height: 590px;
    height: 590px;
    border-right-style: solid;
    border-color: #2676C2;
    border-width: 1px;
  }

  .el-main {
    background-color: #FFFFFF;
    color: #333;
    text-align: center;
    /* line-height: 160px; */
    height: 550px;
    padding: 0;
    margin: 0;
    display: flex;
  }

  .left {
    width: 200px;
    height: 100%;
  }
  .right {
    width: 260px;
    height: 100%;
  }
  .item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    color: #2676C2;
    border-right-style: solid;
    border-bottom: solid;
    border-color: #2676C2;
    border-width: 1px;
  }
  .input {
    width: 50px;
    height: 20px;
    border: 1px solid #999999;
    border-radius: 2px;
    background-color: #dddddd;
    text-align: center;

  }

</style>
